import React, { memo, useCallback } from 'react'
import { UserOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import { } from 'react-router-dom'


import { Form, Input, Button } from 'antd';
import { LoginWrapper } from './style';


const layout = {
    wrapperCol: {
        span: 24,
    },
};

export default memo(function Login(props) {
    const onFinish = (values) => {
        console.log('Success:', values);
        props.history.push('/home')
    }

    const onFinishFailed = useCallback(
        (errorInfo) => {
            console.log('Failed:', errorInfo);
        },
        [],
    );

    return (
        <LoginWrapper>
            <div className="content">
                <div className="logo">Reaper</div>
                <div className="form_content">
                    <Form {...layout} name="basic" initialValues={{ remember: true, }} style={{ width: '100%' }} onFinish={onFinish} onFinishFailed={onFinishFailed} >
                        <Form.Item name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input style={{ width: '100%' }} size="large" prefix={<UserOutlined />} placeholder="请输入手机号" bordered={false} />
                        </Form.Item>
                        <Form.Item name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password size="large" prefix={<EyeInvisibleOutlined />} placeholder="请输入密码" bordered={false} />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" block size="large" shape="round">登录</Button>
                        </Form.Item>
                    </Form>
                </div>

            </div>
        </LoginWrapper>
    )
})
